import { sensitiveWordsConfig } from '@renderer/config/sensitiveWords'
import FilterService from '@renderer/services/FilterService'
import { Tooltip } from 'antd'
import { ShieldAlert } from 'lucide-react'
import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

interface Props {
  ToolbarButton: any
}

const SensitiveWordButton: FC<Props> = ({ ToolbarButton }) => {
  const { t } = useTranslation()
  const [enabled, setEnabled] = useState(sensitiveWordsConfig.enabled)

  useEffect(() => {
    // 初始化状态
    setEnabled(sensitiveWordsConfig.enabled)
  }, [])

  const toggleSensitiveWordFilter = () => {
    const newState = !enabled
    // 尝试设置敏感词过滤状态，如果设置成功则更新UI
    if (FilterService.setEnabled(newState)) {
      setEnabled(newState)
    }
  }

  // 如果配置不允许用户修改敏感词设置，则不显示此按钮
  if (!sensitiveWordsConfig.allowUserConfig) {
    return null
  }

  return (
    <Tooltip
      placement="top"
      title={enabled ? t('chat.input.sensitive_word_filter_enabled') : t('chat.input.sensitive_word_filter_disabled')}
      arrow>
      <ToolbarButton type="text" onClick={toggleSensitiveWordFilter}>
        <ShieldAlert size={18} color={enabled ? 'var(--color-link)' : 'var(--color-icon)'} />
      </ToolbarButton>
    </Tooltip>
  )
}

export default SensitiveWordButton
